import {View, Text, Textarea, Image, Icon, CheckboxGroup, Checkbox} from "@tarojs/components";
import {useEffect, useState} from "react"
import styles from './refund_order.module.scss';
import Taro from "@tarojs/taro";
import {request} from "../../utils/request";
import {apis} from "../../constants/apis";

const refundOrder = () => {
  const [rufundTypeList, setRufundTypeList] = useState<any>([]);
  const [selectRefundTypes, setSelectRefundTypes] = useState<any>([]);
  const [inputCount, setInputCount] = useState<any>(0);
  const [details, setDetails] = useState<any>('');
  const [imageFilesUpload, setImageFilesUpload] = useState<any>([]);
  const [orderInfo, setOrderInfo] = useState<any>({});
  useEffect(() => {
    resetOrderRefundType();
    if (Taro.getCurrentInstance().router?.params) {
      const parmas: any = Taro.getCurrentInstance().router?.params
      let data = JSON.parse(decodeURIComponent(parmas.data));
      setOrderInfo(data)
    }
  }, []);


  const resetOrderRefundType = () => {
    setRufundTypeList([{
      value: 'SOLD_OUT',
      name: '商家通知卖完'
    }, {
      value: 'SHIPPING_WRONG',
      name: '商家送错'
    }, {
      value: 'SHIPPING_LESS',
      name: '商家少送'
    }, {
      value: 'BOX_BROKEN',
      name: '残品撒漏/包装破损'
    }, {
      value: 'DIRTY',
      name: '餐品内有异物'
    }, {
      value: 'WRONG_MORE_DOT',
      name: '点多/点错了',
    }, {
      value: 'OTHER',
      name: '其他原因',
    }
    ])
  }

  const reasonCheckBoxChange = (e) => {
    const refund = e.detail.value;
    setSelectRefundTypes(refund);
  }

  const inputDetail = (e) => {
    const len = e.detail.value;
    setInputCount(len.length);
    setDetails(len);
  }

  const chooseImage = () => {
    Taro.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: (res) => {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths[0];
        const base64 = 'data:image/jpeg;base64,'+wx.getFileSystemManager().readFileSync(tempFilePaths, "base64");
        setImageFilesUpload(base64);
      }
    })
  };

  const formSubmit = () => {
    let rufundType = '';
    selectRefundTypes.forEach(item => {
      rufundType += item + ',';
    });

    request({
      url: apis.REFUND_ORDER_SUBMIT,
      data: {
        customerId: orderInfo.customerId,
        orderId: orderInfo.id,
        customerName: orderInfo.customerName,
        refundType: rufundType,
        detail: details,
        refundAmount: orderInfo.payment,
        image: imageFilesUpload,
      },
      method: 'POST',
      pureData: false,
    }).then(res => {
      if (res.code === 200) {
        Taro.navigateBack({delta: 2});
      }
    })
  }

  return (
    <View className="container">
      <View style={{marginTop: "30rpx", marginRight: "70rpx"}}>
        <CheckboxGroup onChange={(e) => {
          reasonCheckBoxChange(e);
        }}>
          {rufundTypeList.map(item => {
            return (
              <View style={{marginRight: "200rpx", marginTop: "20rpx"}}>
                <Checkbox value={item.name}>{item.name}</Checkbox>
              </View>
            )
          })}
        </CheckboxGroup>
      </View>

      <View className={styles.refund_images_wrap}>
            <View className={styles.refund_image_item}>
              <View className={styles.refund_image_remove}/>
              <Image src={imageFilesUpload} mode="aspectFill" className={styles.refund_image_preview}/>
            </View>

        {imageFilesUpload.length < 1 && <View className={styles.refund_image_select} onClick={chooseImage}>+</View>}
      </View>


      <View className={styles.notes}>
        <Textarea className={styles.text_area} onInput={(e) => {
          inputDetail(e)
        }} maxlength={50} placeholder={"退款原因"}/>
        <View style={{display: "flex", justifyContent: "flex-end"}}>{inputCount}/50</View>
      </View>

      <View onClick={formSubmit} className={`${styles.confirm_send_btn} item-click`}>提交申请</View>

    </View>
  )

}
export default refundOrder;
